<template>
  <div>
    <my-skeleton v-if="initLoading"></my-skeleton>
    <div class="book-detail">
      <s-nav-bar class="nopad" :title="$route.meta.title"></s-nav-bar>
      <div class="info-wrap">
        <div><img :src="data.icon"></div>
        <div>
          <h1>{{ data.name }}</h1>
          <p>作者：{{ data.author }}</p>
          <p>分类：{{ data.kind }}</p>
          <p class="btn-row">
            <button class="read-btn" @click="handleRead()">立即阅读</button>
          </p>
        </div>
      </div>
      <div class="line nopad"></div>
      <div class="abstract">
        <h4>内容简介</h4>
        <p>{{ data.desc }}</p>
      </div>
      <div class="line nopad"></div>
      <div class="list" v-if="data.chapterList">
        <h4>目录<span>（共 {{ data.totalChapter }} 章）</span></h4>
        <ul>
          <li v-for="(item, index) in data.chapterList" :key="index">
            <span @click="handleRead(item.path)">{{ item.name }}</span>
          </li>
        </ul>
        <div class="btn-more-list vh-c" @click="toChapterList">更多章节<van-icon name="arrow" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import MySkeleton from '@/components/MySkeleton.vue'
import sNavBar from '@/components/sNavBar.vue'
import Star from '@/components/Star.vue'
import LoadMore from '@/components/LoadMore.vue'
export default {
  name: 'bookDetailView',
  components: {
    MySkeleton,
    sNavBar,
    Star,
    LoadMore
  },
  data() {
    return {
      initLoading: true,
      data: {},
      pathStr: this.$route.params.path
    }
  },
  computed: {
    readPath() {
      let { chapterList = [{ path: '' }] } = this.data;
      return chapterList[0].path;
    }
  },
  activated() {
    if (this.$route.params.path) {
      this.resetData();
    }
    this.getData();
  },
  methods: {
    resetData() {
      this.initLoading = true;
      this.data = {};
      this.pathStr = this.$route.params.path;
    },
    getData() {
      this.$bqg.getInfoAndChapter(this.pathStr).then(res => {
        let { chapterList, ...rest } = res;
        this.data = Object.freeze({
          totalChapter: chapterList.length,
          chapterList: chapterList.slice(0, 20),
          ...rest
        });
        this.initLoading = false;
      })
    },
    getRecentRead() {
      const recentRead = localStorage.getItem('xy_recentRead') || "[]";
      const jsonObj = JSON.parse(recentRead);

      let findItem = jsonObj.find((book) => {
        return book.name == this.data.name
      }) || { path: null };
      return findItem.path
    },
    handleRead(path) {
      if (!path) {
        path = this.getRecentRead();
      }
      const { name, desc, icon, author } = this.data;
      this.$router.push({
        name: 'articleView',
        params: {
          path: path || this.readPath,
          rootPath: this.pathStr,
          data: {
            name,
            desc,
            icon,
            author,
          }
        }
      })
    },
    toChapterList() {
      const { name, desc, icon, author } = this.data;
      this.$router.push({
        name: 'chapterView',
        params: {
          rootPath: this.pathStr,
          data: {
            name,
            desc,
            icon,
            author,
          }
        }
      })
    }
  },
}
</script>

<style>
.book-detail h1,
.book-detail h4 {
  font-size: 17px;
  margin-bottom: 10px;
}

.book-detail>div:not(.nopad) {
  padding-left: 15px;
  padding-right: 15px;
}

/* 书本详情 */
.info-wrap {
  display: flex;
  padding-top: 15px;
  padding-bottom: 15px;
}

.info-wrap img {
  border-radius: 4px;
  width: 100px;
  height: 130px;
}

.info-wrap>div:nth-child(2) {
  margin-left: 15px;
}

.list {
  overflow: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.list::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
}

.info-wrap p,
.abstract p,
.list li {
  font-size: 14px;
  color: #888;
  margin-bottom: 5px;
}

/* 按钮 */
.btn-row {
  margin-top: 20px;
}

.read-btn {
  outline: 0;
  background: transparent;
  padding: 6px 15px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #ff976a;
  border: 1px solid #ff976a;
  border-radius: 5px;
}


/* 内容简介 */
.abstract p {
  text-indent: 2em;
}

.list>h4>span {
  font-size: 12px;
  font-weight: normal;
  color: #ABA49A;
}

.list li {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.list li>span {
  color: #888;
  margin-left: 2em;
}

.btn-more-list {
  border: 1px solid #E4E0DD;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  line-height: 40px;
  color: #998D7F;
  margin-top: 20px;
  margin-bottom: 50px;
}
</style>